<template>
    <div class="basic_top">
        <div>
            <el-button type="primary" v-on:click="add">新增</el-button>
        </div>
        <div>
            <el-button v-on:click="refresh" type="success">刷新数据</el-button>
            <div
                style="margin-left: 5px; display: flex;align-items:right;justify-content: right;justify-items: center;">
                <el-input v-model="inputValue" style="padding-top:2px;" clearable placeholder="Please input">
                </el-input>
                <el-button type="text" v-on:click="search">搜索</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
    name: 'EditButotn',
})
export default class extends Vue {
    @Prop({ required: false }) private listData?: Function
    @Prop({ required: false }) private filterFieldName?: Function

    public inputValue = "";
    public add() {
        this.$emit("add")
    }
    public refresh() {
        this.$emit("refresh")
    }

    public search() {
        let arr = this.filterFieldName ? this.filterFieldName().split(",") : []
        let list = this.listData && this.listData();
        console.error("aa", list)

        let resultArr = list.filter((value: any) => {
            let isOk: boolean = false
            if (arr.length > 0) {
                for (let i = 0; i < arr.length; i++) {
                    if (value[arr[i]] && `${value[arr[i]]}`.indexOf(this.inputValue) > -1) {
                        isOk = true
                    }
                }
            }
            return isOk
        })
        this.$emit("search", resultArr)
    }

}
</script>

<style lang="scss">
.basic_top {
    width: 100%;
    height: 50px;
    display: flex;
    padding-top: 5px;
    padding-bottom: 5px;
    flex-direction: row;
    justify-content: space-between;
}

.basic_top>div {
    flex: 1;
    display: flex;
    flex-direction: row;
}

.basic_top div:last-child {
    display: flex;
    flex-direction: row;
    justify-content: right;
    /* background-color: aqua; */
}
</style>